<template>
  <div style="margin-left: 20px;margin-top: 20px">
    <el-row :gutter="10">
      <el-col :span="12" style="max-width: 100%">
        <el-card>
          <div id="myChart" :style="{width: '600px', height: '500px'}"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>

  <div style="margin-top: 40px;margin-left: 20px;width: 100%">

    <a href="https://space.bilibili.com/340880619">
      <img src="../../public/BILIBILI_LOGO.png" height="20" width="45" alt="BILIBILI"/>
    </a>
    <a href="https://blog.csdn.net/skylibiao" style="margin-left: 20px">
      <img src="../../public/csdn.png" height="22" width="92"/>
    </a>
    <!--    <h3 style="color: #409EFF">公告</h3>-->
    <!--    <br/>-->

    <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="time"
          label=""
          width="100">
      </el-table-column>
      <el-table-column
          prop="context"
          label=""
          width="200">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="">
      </el-table-column>
    </el-table>
    <span style="font-size: xx-small;color: #8c939d">注：以上部分功能未开放</span>
  </div>

</template>

<script>
import request from "@/utils/request";
import Im from "@/views/Im";

export default {
  name: "Home",
  components: {Im},
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.drawLine();
    this.getNoticeList();
  },
  methods: {
    // tableRowClassName({row, rowIndex}) {
    //   if (rowIndex === 1) {
    //     return 'warning-row';
    //   } else if (rowIndex === 3) {
    //     return 'success-row';
    //   }
    //   return '';
    // },
    getNoticeList() {
      request.get("/v1/sys/notice/list").then(res => {
        if (res.code === '0') {
          this.tableData = res.data;
        } else {

        }
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$root.echarts.init(document.getElementById('myChart'))
      let option = {
        title: {
          text: '各地区用户比例统计图',
          subtext: '',
          left: 'left'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          trigger: 'item',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '用户比例',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '60%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: []
          }
        ]
      }
      request.get("/v1/sys/user/count").then(res => {
        if (res.code === '0') {
          res.data.forEach(item => {
            option.series[0].data.push({name: item.address, value: item.count})
          })
          // 绘制图表
          myChart.setOption(option);
        }
      })

    }
  }
}
</script>

<style>
/*.el-table .warning-row {*/
/*  background: oldlace;*/
/*}*/

/*.el-table .success-row {*/
/*  background: #f0f9eb;*/
/*}*/
</style>
